<template>
    <div class='p-home app-container'>
        <div v-if="!pageStatus" class="loginPage" :style="{height:Height}">
            <div class="login_l_img">
                <img :src="loginImg">
            </div>
            <div class="login">
                <div class="login_logo">
                    <a href="#"><img :src="loginLogo"></a>
                </div>
                <div class="login_name">
                    <p>后台管理系统</p>
                </div>
                <input name="username" type="text" value="用户名" onfocus="this.value=''" onblur="if(this.value==''){this.value='用户名'}">
                <span id="password_text" onclick="this.style.display='none';document.getElementById('password').style.display='block';document.getElementById('password').focus().select();">密码</span>
                    <input name="password" type="password" id="password" style="display:none;" onblur="if(this.value==''){document.getElementById('password_text').style.display='block';this.style.display='none'};">
                <input value="登录" style="width:100%;" type="submit" @click="submitBtn">
            </div>
        </div>
        <div v-if="pageStatus">
            <div class="list-wrapper" style="flex: 1;">
                <div class="content">
                    <div class="title">
                        <span>首页后台管理</span>
                    </div>
                    <div class="selectForm">
                        <el-form :model="selectForm" label-width="170px" size="mini">
                            <el-form-item label="请选择要编辑的模块：">
                                <el-select v-model="selectForm.value" @change="onSelectedDrug" placeholder="请选择" size="mini">
                                    <el-option v-for="(item,i) in options" :key="i" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="tabForm">
                        <el-form ref="form" :model="form" :rules="rules" label-width="150px" size="mini">
                            <el-form-item label="当前日期：">
                                <el-date-picker v-model="form.data" value-format="yyyy-MM-dd" :picker-options="pickerOptions1" type="date" placeholder="选择日期"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="发布人：">
                                <el-input v-model="form.user" placeholder="请输入发布人"></el-input>
                            </el-form-item>
                            <el-form-item label="部门名称：">
                                <el-input v-model="form.user" placeholder="请输入部门名称"></el-input>
                            </el-form-item>
                            <el-form-item label="标题：">
                                <el-input v-model="form.user" placeholder="请输入标题"></el-input>
                            </el-form-item>
                            <el-form-item :label="labelPic" v-if="selectForm.value != '3'">
                                <el-upload class="avatar-uploader"
                                    ref="uploadxls"
                                    action="aaa"
                                    :limit="1"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :on-change="handlePictureCardPreview"
                                    :before-upload="beforeupload"
                                    accept="image/png,image/gif,image/jpg,image/jpeg">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item :label="labelTextarea" v-if="selectForm.value == '2' || selectForm.value == '3'">
                                <el-input type="textarea" placeholder="请输入内容" v-model="form.textarea" maxlength="500" show-word-limit :autosize="{ minRows: 4, maxRows: 10}"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <div class="list-wrapper" style="flex: 1;">
                <div class="content">
                    <comm-table ref="dragTable" :loading="loading" :data="tableData" style="width: 100%">
                        <!-- <el-table-column width="80" type="selection" /> -->
                        <el-table-column prop="code" label="发布人" />
                        <el-table-column prop="mcode" label="部门名称" />
                        <el-table-column prop="codename" label="标题" />
                        <el-table-column prop="time" label="发布时间" />
                        <el-table-column prop="ramk" label="发布内容" />
                        <el-table-column prop="data" label="操作" width="140">
                            <template>
                                <span class="operation-btn">编辑</span>
                                <span class="operation-btn">删除</span>
                            </template>
                        </el-table-column>
                    </comm-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import loginImg from '@/assets/login-img.png'
    import loginLogo from '@/assets/login_logo.png'
    import TableCommMixin from '@/mixins/TableCommMixin'
    export default {
        mixins: [TableCommMixin],
        data() {
            return {
                loginImg:loginImg,
                loginLogo:loginLogo,
                labelPic:'新闻图片：',
                labelTextarea:'通知公告内容：',
                pageStatus:false,
                Height:'',
                selectForm:{
                    value:'3',
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                options:[
                    {value: '0', label: '重要活动'},
                    {value: '1', label: '组织建设'},
                    {value: '2', label: '公司新闻'},
                    {value: '3', label: '通知公告'}
                ],
                form:{
                    ddata:'',
                },
                rules:{},
                imageUrl:'',
                formData: new FormData(),
                tableData:[
                    {code:'发布人',mcode:'人事部',codename:'放假',time:'2020-10-12',ramk:'放假'}
                ]
            }
        },
        methods: {
            //登录
            submitBtn() {
                this.pageStatus = true;
            },
            //切换事件
            onSelectedDrug() {
                if (this.selectForm.vlaue == '0') {
                    this.labelPic = '重要活动图片：';
                } else if(this.selectForm.vlaue == '1') {
                    this.labelPic = '组织活动图片：';
                } else if(this.selectForm.vlaue == '2') {
                    this.labelPic = '新闻图片：';
                    this.labelTextarea = '新闻内容：'
                } else if(this.selectForm.vlaue == '3') {
                    this.labelTextarea = '通知公告内容：';
                }
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            // 图片预览
            handlePictureCardPreview (file) {
                this.imageUrl = file.filename
                console.log(file)
                // this.$refs['form'].validateField('file')
            },
            // 阻止upload的自己上传，进行再操作
            beforeupload (file) {
                this.formData.append('file', file)
                return false
            },
            onSubmit() {

            }
        },
        mounted() {
            this.Height = (document.documentElement.clientHeight - 152)+ 'px';
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    .p-home {
        height: 100%;
        .loginPage {
            margin: 20px auto 0;
            width: 96.5%;
            padding-top: 100px;
            min-width: 1040px;
            height: 100%;
            overflow: hidden;
            background: #93defe;
            background-size: cover;
            .login_l_img {
                float: left;
                width: 432px;
                height: 440px;
                margin-left: 50px;
            }
            .login_l_img img {
                width: 500px;
                height: 440px;
            }
            .login {
                height: 360px;
                width: 400px;
                padding: 50px;
                background-color: #ffffff;
                border-radius: 6px;
                box-sizing: border-box;
                float: right;
                margin-right: 50px;
                position: relative;
                margin-top: 50px;
                .login_logo {
                    width: 120px;
                    height: 120px;
                    border: 5px solid #93defe;
                    border-radius: 100px;
                    background: #fff;
                    text-align: center;
                    line-height: 110px;
                    position: absolute;
                    top: -60px;
                    right: 140px;
                    a {
                        color: #27A9E3;
                        text-decoration: none;
                        cursor: pointer;
                    }
                    img {
                        width: 60px;
                        height: 60px;
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
                .login_name {
                    width: 100%;
                    float: left;
                    text-align: center;
                    margin-top: 20px;
                    p {
                        width: 100%;
                        text-align: center;
                        font-size: 18px;
                        color: #444;
                        padding: 10px 0 20px;
                    }
                }
                input[type=text], input[type=file], input[type=password], input[type=email], select {
                    border: 1px solid #DCDEE0;
                    vertical-align: middle;
                    border-radius: 3px;
                    height: 50px;
                    padding: 0px 16px;
                    font-size: 14px;
                    color: #555555;
                    outline: none;
                    width: 100%;
                    margin-bottom: 15px;
                    line-height: 50px;
                    color: #888;
                }
                #password_text {
                    border: 1px solid #DCDEE0;
                    vertical-align: middle;
                    border-radius: 3px;
                    height: 50px;
                    padding: 0px 16px;
                    font-size: 14px;
                    color: #888;
                    outline: none;
                    width: 100%;
                    margin-bottom: 15px;
                    display: block;
                    line-height: 50px;
                }
                input[type=submit], input[type=button] {
                    display: inline-block;
                    vertical-align: middle;
                    padding: 12px 24px;
                    margin: 0px;
                    font-size: 16px;
                    line-height: 24px;
                    text-align: center;
                    white-space: nowrap;
                    vertical-align: middle;
                    cursor: pointer;
                    color: #ffffff;
                    background-color: #27A9E3;
                    border-radius: 3px;
                    border: none;
                    -webkit-appearance: none;
                    outline: none;
                    width: 100%;
                }
            }

        }
        .selectForm {
            padding: 20px 20px 0;
        }
        .tabForm {
            width: 500px;
            margin: 0 auto;
            .el-input, .el-select,.el-textarea {
                width: 100%;
            }
            .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                position: relative;
                overflow: hidden;
                display: inline-block;
                text-align: center;
                cursor: pointer;
                outline: none;
            }
            .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    }
</style>
